<template>
  <div style="display: flex">
    <div style="margin-right: 20px">
      <el-date-picker
        v-model="startDate"
        type="date"
        :placeholder="startDateHolder"
        :disabled-date="startDisabled"
        v-bind="$attrs.startOptions || {}"
      />
    </div>
    <div>
      <el-date-picker
        v-model="endDate"
        type="date"
        :placeholder="endDateHolder"
        :disabled-date="endDisabled"
        v-bind="$attrs.endOptions || {}"
        :disabled="endDateDIsabled"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
const props = defineProps({
  // 开始日期占位符
  startDateHolder: {
    type: String,
    default: "请选择开始日期",
  },
  // 结束日期占位符
  endDateHolder: {
    type: String,
    default: "请选择结束日期",
  },
  // 禁用今天之前的日期
  disableTodayBefore: {
    type: Boolean,
    default: true,
  }
});

const startDate = ref();
const endDate = ref();
const endDateDIsabled = ref(true);
const emits = defineEmits(["startChange", "endChange"]);
// 禁用开始日期逻辑
const startDisabled = (time: any) => {
  if (props.disableTodayBefore) {
    return time.getTime() < Date.now() - 1000 * 60 * 60 * 24;
  }
};
// 禁用结束日期逻辑
const endDisabled = (time: Date) => {
  if (startDate.value) {
    return time.getTime() < startDate.value.getTime() + 1000 * 60 * 60 * 24;
  }
};
// 监听开始日期变化
watch(
  () => startDate.value,
  (newVal) => {
    if (!newVal) {
      endDate.value = null;
      endDateDIsabled.value = true;
    } else {
      emits("startChange", newVal);
      endDateDIsabled.value = false;
    }
  }
);
// 监听结束日期变化
watch(
  () => endDate.value,
  (newVal) => {
    if (newVal) {
      emits("endChange", { startDate: startDate.value, endDate: newVal });
    }
  }
);
</script>

<style scoped lang="scss"></style>
